Assignment #4: Interactive Artwork - Butterfly Game - Josh Plante
You are a butterfly! Stay alive and earn points by breaking the coloured bars that threaten to smush you against the ceiling!
Tip: try and fly above the coloured bars as they come at you. If a coloured bar reaches the ceiling, the game will end.
1. Use the [mouse/trackpad] to fly the butterfly around the canvas.
2. When over a circle, use the [spacebar] to match its colour.
3. Match the colour of the rising bar to destroy it and increase your score.
4. The better your score, the more challenging the game will become! Good luck!
Documentation
ass4_1.js - inital files and functions, project breakdown at top of code
ass4_2.js - getColour function, applied to butterfly
ass4_3.js - step one completed
ass4_4.js - step two completed, generating multiple shapes using create data function and array, plus unique circle toriod function
ass4_5.js - working o step 2.5, butterly and circle collision, butterfly eats circles
ass4_6.js - done step 2.5, butterfly changes colours to match the circle its colliding with
ass4_7.js - used event.preventDefault to prevent spacebar from scrolling players on the screen
ass4_8.js - working on step 3, rect array and animation, beginning collision function creation for rects
ass4_9.js - developing rect collision function. and console.log scoring system
ass4_10.js - step 3 done, rect collision function, scoring, updated html format and text
ass4_11.js - spawnRects() function updated and now spawns rectangles faster as the player gains score
ass4_12.js - code cleanup before final additions. planning for game over screen plus score display
ass4_13.js - code cleanup, added score display, added game over function
ass4_14.js - final code. updated gameOver() function, streamlined console.logs with final stop all collision function to run through my arrays
Citations
randomly indexing and returning array elements
used two line from the answer. event.target and event.preventDeault function. used to disable space auto page scroling for my game
css line to hide mouse cursor when hovering over canvas element of page, useful for my game
setTimeout nested functions, spawnRects, used to change from setInterval to allow for gameSpeed variable to increase speed of rect generation
used for drawScore() function, and for gameover
used for drawScore() function, and for gameover, font styles
*Trouble telling apart different shades of a colour? Try squinting your eyes!*
---*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*------*||*---